<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-dom结构-table</title>
    <style>
        .container {
            width: 960px;
            margin-left: auto;
            margin-left: auto;
            padding: 50px;

        }

    </style>
</head>
<body>

<div class="container">

    <table id="list">
        <thead>
        <tr id="thead">

        </tr>

        </thead>

        <tbody>


        </tbody>


    </table>

</div>

<div id="toolbar">
    <button>入职</button>
    <button>转职</button>
    <button>离职</button>
</div>
</body>
<script src="../../lib/jquery.js"></script>

<script type="module">

    import {employees} from '../../mock/employee.js'

    let columns = [
        {
            field: 'title',
            title: '职务'
        }, {
            field: 'dept',
            title: '部门'
        }, {
            field: 'name',
            title: '姓名'
        }
    ]


    /**
     * 1. 列标题决定列的顺序
     * */
    $.each(columns, function (index, item) {

        let tHeader = $('<th></th>').text(item.title);
        $('#thead').append(tHeader);
    })

    /**
     * 2. 行数由employees.length
     * */
    $.each(employees, function (index, item) {
        let tRow = $('<tr></tr>');

        /**
         * key : 属性名称
         * innerItem：属性值
         * */

        /**
         * td的内容 来自 item[colItem.field]
         * */
        /***
         *  ver 3.0
         * */
        $.each(columns, function (index, colItem) {// item{name lee}  colItem.field  item[name]
            let tData = $('<td></td>').text(item[colItem.field]);
            tRow.append(tData);
        })


        /**
         * ver 2.0
         * **/
        /* $.each(item, function (key, innerItem) { // key -- id name dept title
             if (key != 'id') {
                 let tData = $('<td></td>').text(innerItem); //  name -- innerItem
                 tRow.append(tData);
             }
         })*/


         /***
          *  Ver 1.0
          * */
        /*     let tdForName = $('<td></td>').text(item.name);
                 let tdForDept = $('<td></td>').text(item.dept);
                 let tdForTitle = $('<td></td>').text(item.title);*/

        /* tRow.append(tdForName);
         tRow.append(tdForDept);
         tRow.append(tdForTitle);*/

        $('#list tbody').append(tRow);

    })


</script>
</html>